<link rel="stylesheet" href="__STATIC__/libs/layui/css/layui.css">
<script src="__STATIC__/libs/layui/layui.js"></script>
<script src="__STATIC__/libs/jquery/jquery.min.js"></script>
<style type="text/css">
.max_h {
    height: 115px;
    overflow: hidden;
}

#ImagesList .operate {
    display: block;
    height: 40px;
    width: 100%;
    background: #f4f5f9;
}

#ImagesList .operate .check {
    max-width: 170px;
    overflow: hidden;
    float: left;
    margin-left: 11px;
    height: 18px;
    padding: 11px 0;
    position: relative;
}
</style>
<div class="layui-form" style="padding-top: 15px;">
    <div class="layui-fluid layui-form">
        <blockquote class="layui-elem-quote quoteBox">
            <form class="search-from" method="get">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" class="layui-input searchVal" placeholder="请输入附件名称">
                    </div>
                    <a class="layui-btn search_btn" data-type="reload">搜索</a>
                </div>
            </form>
        </blockquote>
        <div class="layui-row" id="ImagesList">
            <ul class="layui-col-space30">
                {volist name="_list" id="vo"}
                <li class="layui-col-md2 layui-col-sm3" data-file-id="{$vo.id}" data-file-path="{$vo.path}">
                    <div class="max_h">
                        <img src="{$vo.path}" alt="{$vo.name}" width="100%">
                    </div>
                    <div class="operate">
                        <div class="check">
                            <input type="checkbox" title="{$vo.name}" lay-skin="primary" lay-filter="filter">
                        </div>
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
        {$_list|raw}
    </div>
</div>
<script type="text/javascript">
layui.use('form', function() {
    var form = layui.form;
    form.on('checkbox(filter)', function(data) {
        $('#ImagesList li').removeClass('active')
        $(data.elem).parents('li').toggleClass('active');
    });
})
</script>